<template>
  <AdaptationElDialog
      :visible.sync="show"
      :append-to-body="appendToBody"
      :close-on-click-modal="false"
      :modal-append-to-body="appendToBody"
      fullscreen
      class="dialog-center"
      @opened="opened"
      @closed="closed"
      center>
    <div class="BaseDialog">
      <div class="BaseDialogContent">
        <slot></slot>
      </div>
    </div>
  </AdaptationElDialog>
</template>

<script>
import AdaptationElDialog from "./AdaptationElDialog.vue";

export default {
  name: "BaseDialog",
  components: {AdaptationElDialog},
  props: {
    appendToBody: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      show: false,
      openP: {
        resolve: null,
        reject: null,
      },
      closeP: {
        resolve: null,
        reject: null,
      }
    }
  },
  methods: {
    openDialog() {
      this.show=true
      return new Promise((resolve, reject) => {
        this.openP.resolve = resolve
        this.openP.reject = reject
      })
    },
    opened() {
      if(this.openP.resolve) {
        this.openP.resolve()
      }
      this.$emit('opened')
    },
    closeDialog() {
      this.show=false
      return new Promise((resolve, reject) => {
        this.closeP.resolve = resolve
        this.closeP.reject = reject
      })
    },
    closed() {
      if(this.closeP.resolve) {
        this.closeP.resolve()
      }
      this.$emit('closed')
    },
  }
}
</script>

<style lang="less" scoped>
.dialog-center{
  ::v-deep{
    .el-dialog{
      background: transparent !important;
      .el-dialog__header{
        display:none !important;
      }
      .el-dialog__body{
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        overflow: hidden !important;
      }
    }
  }
}
.BaseDialog{
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.50);
  display: flex;
  justify-content: center;
  align-items: center;
  .BaseDialogContent{
    transform: scale(var(--zoomScaleX,1),var(--zoomScaleY,1));
  }
}
</style>